<template>
    <div>
        <div style="background-color: crimson;width: 100%;height: 200px">

            <van-row>
                <van-col style="margin-top: 10px" offset="20">
                    <span style="font-size: 15px;color: white" @click="loginOut">退出</span>
                </van-col>
            </van-row>

            <van-row style="padding-top: 30px" @click="$router.push('/login')">
                <!--未登录显示-->
                <div v-if="!userLoginState">
                    <van-col span="4" offset="1">
                        <van-image
                                round
                                width="65px"
                                height="65px"
                                src="https://catdog-movie.oss-cn-beijing.aliyuncs.com/heapPortrait/default.png"
                        />
                    </van-col>
                    <van-col span="10" offset="1">
                        <span style="font-size: 18px;color: white; line-height: 65px">立即登陆</span>
                    </van-col>
                </div>

                <!--已登录显示-->
                <div v-else>
                    <van-col span="4" offset="1">
                        <van-image
                                round
                                width="65px"
                                height="65px"
                                :src="userInfo.headImgUrl"
                        />
                    </van-col>
                    <van-col span="18" offset="1">
                        <span style="font-size: 18px;color: white; line-height: 65px">{{userInfo.nickname}}</span>
                    </van-col>
                </div>

            </van-row>

            <van-row gutter="20" v-if="!userLoginState">
                <van-col offset="1" span="22">
                    <van-grid direction="horizontal" :column-num="3">
                        <van-grid-item style="height: 40px" icon="contact" text="个人主页" @click="$router.push('/login')"/>
                        <van-grid-item style="height: 40px" text="想看-"/>
                        <van-grid-item style="height: 40px" text="看过-"/>
                    </van-grid>
                </van-col>
            </van-row>

            <van-row gutter="20" v-else>
                <van-col offset="1" span="22">
                    <van-grid direction="horizontal" :column-num="3">
                        <van-grid-item style="height: 40px" icon="contact" text="个人主页" @click="$router.push('/login')"/>
                        <van-grid-item style="height: 40px" :text="'想看 - '+wantSeeNum"/>
                        <van-grid-item style="height: 40px" :text="'看过 - '+haveSeeNum"/>
                    </van-grid>
                </van-col>
            </van-row>


            <van-row gutter="20">
                <van-col span="22" offset="1" style="margin-top: 10px" @click="toOrderListPage">
                    <div style="height: 100px;width: 100%;background-color: white;border-radius: 10px">
                        <span style="font-size: 16px;font-weight: bold;margin-left: 15px">我的订单</span>
                        <van-row style="margin-top: 10px" gutter="20">
                            <van-col offset="2" span="5">
                                <img src="../../../public/img/movie.png"
                                     style="width: 30px;height: 30px;margin-left: 5px">
                                <br/>
                                <span>电影票</span>
                            </van-col>

                        </van-row>
                    </div>
                </van-col>

            </van-row>
        </div>


        <tab-bar></tab-bar>

    </div>
</template>

<script>
    import myApi from "../../api/my";
    import TabBar from "../../components/common/TabBar";
    import {Toast} from 'vant';
    import cookie from 'js-cookie'

    export default {
        name: "My",
        data() {
            return {
                // 登录相关======================================
                phone: "",
                password: "",

                // 用户显示相关
                userInfo: {},                    //用户信息
                userLoginState: false,          //用户登录状态
                wantSeeNum: 0,
                haveSeeNum: 0
            }
        },
        components: {
            TabBar
        },
        methods: {
            toOrderListPage(){
                if (cookie.get("userInfo")){
                    this.$router.push("orderList")
                }else{
                    this.$router.push("login")
                }
            },
            userWantSeeAndHaveSee() {  //得到用户想看与看过的次数
                myApi.userWantSeeAndHaveSee().then(response => {
                    this.wantSeeNum = response.wantSeeNum
                    this.haveSeeNum = response.haveSeeNum
                }).catch(error => {
                    Toast.fail(error)
                })
            },
            loginOut() {  //退出登录
                cookie.set('token', '', {domain: 'localhost'})
                cookie.set('userInfo', '', {domain: 'localhost'})
                this.userInfo = {};
                this.userLoginState = false
            }
        },
        created() {
            //初始化用户 判断是否登录成功
            let userInfoObj = cookie.get("userInfo");
            if (userInfoObj) {
                this.userInfo = JSON.parse(userInfoObj)
                this.userLoginState = true
                this.userWantSeeAndHaveSee()
            }
        },

    }
</script>

<style scoped>
    .hidden {
        display: none;
    }
</style>